
<template>
  <q-dialog persistent fixed v-model="isSplitShotDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
    <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
        <q-header class="bg-grey-10 shadow-7">

            <q-toolbar>
                <q-toolbar-title>拆分镜头</q-toolbar-title>
                <q-space />

                <q-btn dense flat icon="close" @click="handleClose">
                </q-btn>
            </q-toolbar>

        </q-header>
        <q-footer class="bg-grey-10 text-white  shadow-up-7">


            <q-toolbar  class="q-pa-sm" dense inset>

                <q-space></q-space>

                <q-btn  dense  outline class="q-px-md" @click="confirmSplit"> 确认</q-btn>
            </q-toolbar>
        </q-footer>
        <q-page-container>
            <q-page class="bg-dark column hide-scrollbar q-pa-sm">

                <!-- <q-card dark>
                  <span>
                    {{ row.narrate }}
                  </span>
                  <q-menu touch-position context-menu>

                    <q-list dense style="min-width: 100px">
                        <q-item clickable v-close-popup>
                            <q-item-section>拆分</q-item-section>
                        </q-item>
                        <q-item clickable v-close-popup>
                            <q-item-section>复制</q-item-section>
                        </q-item>
                        <q-item clickable v-close-popup>
                          <q-item-section>粘贴</q-item-section>
                      </q-item>



                    </q-list>

                </q-menu>
                </q-card> -->
                <q-list class="text-teal-3">

                  <q-item class="column q-mt-sm q-pa-none q-mb-sm shadow-7 " clickable v-for="item,index in itemList" :key="index"  v-ripple active-class="bg-teal-8 text-white">
                      <q-item-section class="bg-grey-9">
                          <q-card class=" q-pa-sm bg-transparent  column item-center">
                              {{ item }}
                          </q-card>
                      </q-item-section>

                      <!-- <q-item-section>
                    <q-badge>{{item.ctime}}</q-badge>
                </q-item-section>
                <q-item-section>{{item.taskname}}</q-item-section> -->
                  </q-item>

                  <q-separator />

              </q-list>


            </q-page>
        </q-page-container>

    </q-layout>


</q-dialog>
</template>
<script>

export default {
     name:'SplitShot',
     props:{
      isSplitShotDialog:{
        default:false
      },
      row:{
        type:Object
      }
     },
     data(){
      return{
        itemList:[]
      }
     },
     watch:{
        isSplitShotDialog:function(val){
          if(val) this.handleNarrate()
        }
     },
     methods:{
      handleNarrate(){
          let narrate = this.row.narrate;
          let arr = narrate.split(/,|，|；|;/ig);
          console.log(arr);
          this.itemList = arr;

      },
      handleClose(){
          this.$emit('update:isSplitShotDialog',false)
      },
      confirmSplit(){

      }
     }
}


</script>
